<template>
    <div class='left-container'>
        <div class="header">
            <img class="icon" src="@/assets/left/icon.png" alt="">
            <div class="title">
                <img class="text" src="@/assets/left/left-title.png" alt="">
                <img class="bg" src="@/assets/left/left-title-bg.png" alt="">
            </div>
        </div>
        <div class="module1">
            <img class="title" src="@/assets/left/top-title.png" alt="">
            <div class="content">
                <Chart class="chart" :options="LeftTopOptions"></Chart>
            </div>
        </div>
        <div class="module2">
            <img class="title" src="@/assets/left/bottom-title.png" alt="">
            <div class="content1">
                <div class="top">
                    <div class="left">人数占比</div>
                    <div class="center">
                        <div class="title">年龄段统计</div>
                        <Chart class="chart" :options="LeftBottomPie1"></Chart>
                    </div>
                    <div class="right">
                        <div class="title">性别统计</div>
                        <Chart class="chart" :options="LeftBottomPie2"></Chart>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">停留时长</div>
                    <div class="center">
                        <Chart class="chart" :options="LeftBottomLine1"></Chart>
                    </div>
                    <div class="right">
                        <Chart class="chart" :options="LeftBottomLine2"></Chart>
                    </div>
                </div>
            </div>
            <div class="content2">
                <img class="title" src="@/assets/left/bottom2-title.png" alt="">
                <div class="chart-wapper">
                    <Chart class="chart" :options="LeftBottomLine3"></Chart>
                </div>
            </div>
            <div class="content3">
                <!-- <div class="title">讲解人员</div> -->
                <img class="title" src="@/assets/left/list-title.png" alt="">
                <!-- <vue3ScrollSeamless :dataList="LeftBottomList"
                    :classOptions="{ step: 0.5, limitMoveNum: LeftBottomList.length, direction: 2 }"> -->
                    <div class="scroll-wapper">
                        <div class="item" v-for="(item, index) in LeftBottomList" :key="index">
                            <div class="img-wapper">
                                <img class="img" :src="item.url" alt="">
                            </div>
                            <div class="tip"><img src="@/assets/left/person-icon.png" alt="">讲解人{{ index + 1 }}</div>
                        </div>
                    </div>
                <!-- </vue3ScrollSeamless> -->
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
import { LeftTopOptions } from '../constants/left/leftTop';
import { LeftBottomPie1 } from '../constants/left/leftBottomPie1'
import { LeftBottomPie2 } from '../constants/left/leftBottomPie2'
import { LeftBottomLine1 } from '../constants/left/leftBottomLine1'
import { LeftBottomLine2 } from '../constants/left/leftBottomLine2'
import { LeftBottomLine3 } from '../constants/left/leftBottomLine3'
import { LeftBottomList } from '../constants/left/leftBottomList'
</script>
<style lang='scss' scoped>
.left-container {
    width: 390px;

    .header {
        display: flex;
        justify-content: space-between;

        .icon {
            width: 59px;
            height: 59px;
        }

        .title {
            position: relative;
            height: 59px;
            width: 319px;

            .text {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 234px;
                object-fit: cover;
                transform: translate(-50%, -50%);
            }

            .bg {
                width: 100%;
                height: 100%;
            }
        }
    }

    .module1 {
        margin-top: 28px;
        width: 100%;
        height: 235px;
        background: url(@/assets/left/top-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        >.title {
            position: absolute;
            top: 14px;
            width: 189px;
            object-fit: cover;
            left: 22px;
        }

        .content {
            position: absolute;
            top: 48px;
            left: 16px;
            width: 353px;
            height: 176px;
        }
    }

    .module2 {
        margin-top: 32px;
        position: relative;
        width: 100%;
        height: 502px;
        background: url(@/assets/left/bottom-bg.png) no-repeat;
        background-size: 100% 100%;

        >.title {
            position: absolute;
            width: 174px;
            object-fit: cover;
            left: 16px;
            top: 9px;
        }

        .content1 {
            position: absolute;
            top: 58px;
            left: 14px;
            background-color: #050A32;
            width: 315px;
            height: 130px;
            padding: 10px 20px;
            color: #fff;

            .top,
            .bottom {
                display: flex;
                align-items: center;
                width: 100%;

                .left {
                    writing-mode: vertical-lr;
                    color: #fff;
                    font-size: 12px;
                    letter-spacing: 2px;
                    padding: 4px;
                    background-color: #051247;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .center,
                .right {
                    flex: 1;
                    height: 60px;

                    .title {
                        text-align: center;
                        font-size: 12px;
                    }
                }
            }

            .top {
                margin-bottom: 10px;
            }

        }

        .content2 {
            width: 350px;
            height: 100px;
            position: absolute;
            top: 202px;
            left: 14px;
            text-align: center;

            .title {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: -20px;
                width: 228px;
                object-fit: cover;
            }

            .chart-wapper {
                margin-top: 20px;
                width: 100%;
                height: 120px;
            }
        }

        .content3 {
            position: absolute;
            top: 349px;
            left: 14px;
            width: 350px;;
            overflow: hidden;
            .title {
                position: absolute;
                top: 0;
                left: 0;
                width: 115px;
                object-fit: cover;
            }

            .scroll-wapper {
                display: flex;
                margin-top: 30px;

                .item {
                    width: 30%;
                    display: flex;
                    flex-direction: column;
                    margin-right: 20px;

                    .img-wapper {
                        background: url(@/assets/left/border.png) no-repeat;
                        background-size:100% 100%;
                        width: 77px;
                        position: relative;
                        height: 100px;
                        display: flex;
                        align-items: flex-end;
                        .img {
                            position: relative;
                            left: 5%;
                            bottom: 7%;
                            width: 90%;
                            object-fit: cover;
                        }
                    }

                    .tip {
                        display: flex;
                        color: #fff;
                        font-size: 12px;
                        align-items: center;

                        img {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>